<template>
  <div class="contact">
    <MyHeader />
    <div>
      <Row class="titleBg">企业联系人</Row>
      <Form class="contact_company" label-position="left" :label-width="100"  ref="contact" :model="contact">
        <FormItem style="border-top: 1px solid #BFE5F5;" label="姓名" prop='name' :rules="validator.chinese" >
          <Input v-model="contact.name" type="text" :maxlength="15" placeholder="请输入姓名" @on-focus="contactSelect" @on-blur="contactBlur" @on-change="contactChange"></Input>
          <ul class="box" v-if="isContactShow">
            <li class="title" v-for="(option, index) in personList" :key="index" v-on:click="isSelect(option,contact,isContactShow)">
              <p v-html="option.name"></p>
            </li>
          </ul>
        </FormItem>
        <FormItem class="contact_select" label="证件类型" prop='certype' :rules="validator.must">
            <Select v-model="contact.certype " placeholder="请选择住证件类型" >
              <Option value="1">身份证</Option>
              <Option value="2">驾驶证</Option>
            </Select>
        </FormItem>
        <FormItem label="证件号码" prop='cerno' :rules="validator.cerno" >
          <Input v-model="contact.cerno" type="text" placeholder="请输入身份证号码" :maxlength="18"></Input>
        </FormItem>
        <FormItem label="移动电话" prop='mobile' :rules="[validator.must, validator.telphone ]" >
          <Input v-model="contact.mobile" type="text" placeholder="请输入移动电话" :maxlength="11"></Input>
        </FormItem>
        <FormItem label="电子邮箱" prop='email'>
          <Input v-model="contact.email" type="text" placeholder="请输入电子邮箱"></Input>
        </FormItem>
        </Form>
       
        <Row class="titleBg">财务负责人</Row>
        <Form class="contact_company" label-position="left" :label-width="100"  ref="finance" :model="finance">
        <FormItem style="border-top: 1px solid #BFE5F5;" label="姓名" prop='name' :rules="validator.chinese" >
          <Input v-model="finance.name" type="text" :maxlength="15" placeholder="请输入姓名" @on-focus="financeSelect" @on-blur="financeBlur" @on-change="financeChange"></Input>
          <ul class="box" v-if="isFinanceShow">
            <li class="title" v-for="(option, index) in personList" :key="index" v-on:click="isSelect(option,finance,isFinanceShow)">
              <p v-html="option.name"></p>
            </li>
          </ul>
        </FormItem>
        <FormItem class="contact_select" label="证件类型" prop='certype' :rules="validator.must">
            <Select v-model="finance.certype " placeholder="请选择住证件类型" >
              <Option value="1">身份证</Option>
              <Option value="2">驾驶证</Option>
            </Select>
        </FormItem>
        <FormItem label="证件号码" prop='cerno' :rules="validator.cerno" >
          <Input v-model="finance.cerno" type="text" placeholder="请输入身份证号码" :maxlength="18"></Input>
        </FormItem>
        <FormItem label="移动电话" prop='mobile' :rules="[validator.must,validator.telphone ]" >
          <Input v-model="finance.mobile" type="text" placeholder="请输入移动电话" :maxlength="11"></Input>
        </FormItem>
        <FormItem label="电子邮箱" prop='email'>
          <Input v-model="finance.email" type="text" placeholder="请输入电子邮箱"></Input>
        </FormItem>
      </Form>
    </div>
    <div class="contact_bottom">
      <div class="bottom">
        <Button type="warning" @click="saveInfo('contact', 'finance', false)">保存</Button>
        <Button type="primary" @click="gotoNext('contact', 'finance', true)">下一步</Button>
      </div>
      <MyFooter />
    </div>
  </div>
</template>

<script>
  import MyHeader from '../../components/MyHeader2.vue'
  import MyFooter from '../../components/MyFooter.vue'
  import request from '../../utils/request'
  import validator from '../../utils/validatorUtil.js'
  export default {
    data() {
      return {
        validator,
        personList: [],
        isContactShow: false,
        isFinanceShow: false,
        contact: {},
        finance: {}
      }
    },
    components: {
      MyHeader,
      MyFooter
    },
    methods: {
      contactSelect() {
        this.contactChange()
      },
      contactBlur() {
        this.isContactShow = false
      },
      contactChange() {
        if (this.contact.linkman) {
          this.isContactShow = false
        } else {
          this.isContactShow = true
        }
      },
      financeSelect() {
        this.financeChange()
      },
      financeBlur() {
        this.isFinanceShow = false
      },
      financeChange() {
        if (this.finance.linkman) {
          this.isFinanceShow = false
        } else {
          this.isFinanceShow = true
        }
      },
      isSelect(option, person, state) {
        state = false
        person.name = option.name
        person.cerno = option.cerno
        person.mobile = option.mobtel
      },
      queryPersonList() {
        request.get('/interface/apply/cp/setup/queryPersonList.do', {gid: sessionStorage.getItem('gid')}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
            return null
          }
          this.personList = response.data.data
        })
      },
      queryContactList() {
        request.get('/interface/apply/cp/setup/queryContactList.do', {gid: sessionStorage.getItem('gid')}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
          } else if (response.data.result === 'success') {
            let list = response.data.data
            if (list[0].linktype === '1') {
              this.contact = list[0]
              this.finance = list[1]
            } else {
              this.contact = list[1]
              this.finance = list[0]
            }
          }
        })
      },
      save(name1, name2, isNext) {
        this.$router.push({name: 'changeComUpload'});
        //  this.$refs[name1].validate((valid) => {
        //   if (valid) {
        //     this.$refs[name2].validate((valid) => {
        //       if (valid) {
        //         let contactList = []
        //         this.contact.certype = '10'
        //         this.finance.certype = '10'
        //         contactList[0] = this.contact
        //         contactList[1] = this.finance
        //         let postData = new FormData()
        //         postData.append('contactList', JSON.stringify(contactList))

        //         request.post('/interface/apply/cp/setup/updateContact.do', postData
        //           ).then(response => {
        //             if (response.data.result === 'error') {
        //               this.$ErrorAlert(response.data.message)
        //             } else if (response.data.result === 'success') {
        //                 if (isNext) {
        //                 this.$router.push({name: 'FileUpload'})
        //               } else {
        //                 this.$SuccessAlert('保存成功')
        //               }
        //             }
        //           })
        //       }else {
        //           this.$ErrorAlert('数据未填写完全，请注意红色标记')
        //         }
        //     })
        //   }else {
        //      this.$ErrorAlert('数据未填写完全，请注意红色标记')
        //    }
        // })
      },
      saveInfo(name1, name2, isNext) {
        this.save(name1, name2, isNext)
      },
      gotoNext(name1, name2, isNext) {
        this.save(name1, name2, isNext)
      }
    },
    mounted() {
      //this.queryPersonList()
      //this.queryContactList()
    }
  }

</script>

<style lang="scss">
.titleBg {font-size:0.57rem;padding:0.5rem;color:#000;}
  .contact {
    position: relative;
    min-height: 100%;
    >div {
      background: #fff;
      .ivu-form-item {
        margin-bottom: 0;
        border-bottom: 1px solid #BFE5F5;
        label {
          height: 1.75rem;
        line-height: 1.75rem;
        padding: 0 0 0 0.3rem;
        font-size:0.5rem;
        background:#F5FAFD;color:#2D8CF0;
        border-right: 1px solid #BFE5F5;
        }
        input {
          height: 1.75rem;
        border: none;
        padding-left:0.5rem;
        font-size: 0.5rem;
        border-radius: 0;
          &:hover {
            border: none;
          }
          &:focus {
            border: none;
            box-shadow: none;
          }
          &::-webkit-input-placeholder {
            text-align: right;
          }
          &::-moz-placeholder {
            text-align: right;
          }
          &:-ms-input-placeholder {
            text-align: right;
          }
        }
      }
    }
     &_select {
    .ivu-form-item-content {
      background:#fff;
      padding-left: 0.5rem;
      .ivu-select-selection {
        border: none;
        box-shadow: none;
        height: 100%;
        .ivu-select-selected-value {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.5rem;
          padding-left: 0;
        }
        .ivu-select-placeholder {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.5rem;
          padding-left: 0;
        }
      }
    }
  }
    &_bottom {
      padding:0.5rem;
    }
  }
.bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
</style>
